.energy-bar{
  position: relative;
  display: inline-flex;
  display: -ms-inline-flex;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  justify-content: space-between;
  width: 50px;
  height: 100px;
  padding: 0 10px;
  background-color: transparent;
  .energy-item{
    position: relative;
    height: 8px;
    width: 100%;
    .energy-full{
      height: 100%;
    }
    .energy-filling{
      position: relative;
      position: absolute;
      width: 100%;
      bottom: 0;
    }
  }
  .energy-percent{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 5px;
    font-size: 12px;
    color: $dark-color;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
  }
  .energy-title{
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 5px;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
  }
  &.energy-bar-horizon{
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    .energy-title{
      margin: 20px 0 0 -15px;
      transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
    }
  }
}
